<template>
<div>
    <el-container>
      <el-header>Header</el-header>
      <el-container class="main">
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main
          <div>
            <el-button>Default</el-button>
          <el-button plain>Plain</el-button>
          <el-button round>Round</el-button>
          <el-button :icon="IceCreamRound " circle />
          </div>
        </el-main>
      </el-container>
      
      <el-footer>Footer</el-footer>
    </el-container>
</div>
</template>

<script setup>
  import {
    IceCreamRound
    } from '@element-plus/icons-vue'
</script>

<style scoped>
.main{
    height: calc( 100vh - 120px );
}
.el-header,.el-footer{
    background-color: #63adb7;
}
.el-main{
    background-color: pink;
}
</style>